<template>
  <div>
    <a-row>

      <a-col :span="12">
        <!--当组件自带属性无法实现某些样式要求时，可以在组件上自定义style-->
        <a-input placeholder="请输入部门名称" allowClear style="width: 300px;margin-right: 20px" v-model="customerName" @blur="validateT()" />
        <a-button type="primary" icon="search" @click="getCustomerList(customerName)">搜索</a-button>
      </a-col>
     </a-row>

    <br/>
    <a-row>
      <a-col :span="12">
        <a-button style="background-color: #13CE66;color: white" icon="plus-circle" @click="openAdd">新增</a-button>
      </a-col>
    </a-row>
    <!--分页-->

    <template>
      <div>
        <a-table rowKey="customerId"
                 ref="table"
                 size="middle"
                 :columns="columns"
                 :dataSource="data"
                 :pagination="pagination"

                 @change="handleTableChange"
        >
            <span slot="num" slot-scope="text, record, index">
                {{ (pagination.current-1) * pagination.pageSize + parseInt(index)+1 }}
            </span>
          <!--此处是给表格最前列添加序号-->
        </a-table>
      </div>
    </template>


 <!--新增弹窗-->
    <a-modal v-model="visible" title="新增客户" @ok="addCustomer" @cancel="cancel">
      <a-form-model :model="customer" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="addForm">

        <a-form-model-item  label="客户名称" required  prop="customerName" >
          <a-input v-model="customer.customerName" />
        </a-form-model-item>
        <a-form-model-item label="联系人"  required  prop="contacts" >
          <a-input v-model="customer.contacts"/>
        </a-form-model-item>
        <a-form-model-item label="联系人电话" required prop="phoneNumber">
          <a-input v-model="customer.phoneNumber"/>
        </a-form-model-item>
        <a-form-model-item label="客户地址" required prop="address">
          <a-input v-model="customer.address"/>
        </a-form-model-item>
        <a-form-model-item label="备注" required prop="remarks">
          <a-input v-model="customer.remarks"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>



<script>
  import {getAction} from '@/api/manage'
  import {postAction} from '@/api/manage'

  import { axios } from '@/utils/request'
  // import { axios } from '@/utils/request'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

  // 定义数据常量：表格标题列数组


  export default {
    name: "Test",
    data () {
      let validateCustomerName = (rule, value, callback) => {
        if (value === '') {
          console.log("不能为空");
          callback(new Error('不能为空'));//校验失败
        } else {
          callback();//校验通过
        }
      };
      return {
        testForm:'',
        customerName:'',
        contacts:'',

        //同名使用方式
        columns :[
          {
            title: '序号',//列标题文本
            align:"center",
            width:'80px',
            scopedSlots: {customRender: 'num'},//指定自定义渲染标识名
          },
          {
            dataIndex: 'customerId',
            title:"编号",
            align:"center",
          },
          {
            dataIndex: 'customerName',
            title:"客户名称",
            align:"center",
          },
          {
            dataIndex: 'contacts',
            title:"联系人",
            align:"center",
          },
          {
            dataIndex: 'phoneNumber',
            title:"联系人电话",
            align:"center",
          },
          {
            dataIndex: 'address',
            title:"客户地址",
            align:"center",
          },

          {
            dataIndex: 'remarks',
            title:"备注",
            align:"center",

          },
        ],
        data:[],
        // 不同名使用方式
        // tableColumns:columns,
        // tableData:data,
        //使用表格自带分页器设置常用参数
        // pagination:{hideOnSinglePage:true,total:50,pageSize:5,current:3}
        pagination:false,//控制表格自带分页条是否显示
       /* current:1,
        pageSize:2,
        total:50,*/
        visible:false,
        labelCol: { span: 6 },
        wrapperCol: { span: 17 },
        customer: {
          customerId:'',
          customerName: '',
          contacts: '',
          phoneNumber: '',
          address:'',
          remarks:''
        },
        //分页参数
        pagination:{
          size:'large',
          current: 1,
          pageSize: 2,
          total: 0,
          pageSizeOptions: ['10', '20', '30'],//可选的页面显示条数
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          }, //展示每页第几条至第几条和总数
          hideOnSinglePage: false, // 只有一页时是否隐藏分页器
          showQuickJumper:true, //是否可以快速跳转至某页
          showSizeChanger: true, //是否可以改变pageSize
        },
        rules:{
          //使用内置属性定义普通校验规则
          // trigger: 触发事件
          testForm: [
            { required: true, message: 'name不能为空（必填）', trigger: 'blur' },
            { min: 3, max: 5, message: '值长度必须大于3小于5', trigger: 'blur' },
          ],
          // 使用自定义校验规则
          customerName: [{ validator: validateCustomerName, trigger: 'blur' }],
          contacts: [{ validator: validateCustomerName, trigger: 'blur' }],
          phoneNumber: [{ validator: validateCustomerName, trigger: 'blur' }],
          address: [{ validator: validateCustomerName, trigger: 'blur' }],
          remarks: [{ validator: validateCustomerName, trigger: 'blur' }],
        },
        url: {
          get:"/customer/list",
          add: "/customer/add",

        }
      }
    },

    methods: {
      //搜索按钮点击事件
      getCustomerList(){
        console.log(this.pagination.current);

        let parameter = {pageNo:this.pagination.current,pageSize:this.pagination.pageSize,customerName:this.customerName};
        getAction(this.url.get,parameter).then((res) => {
          if (res.success) {
            console.log(res.result);
            this.data = res.result.records;
            this.pagination.current= res.result.current;
            this.pagination.pageSize= res.result.size;
            this.pagination.total= res.result.total;

          }
        })
      },
      //分页
      //表格改变时触发
      handleTableChange(pagination, filters, sorter) {
        this.pagination = pagination;
        this.getCustomerList();
      },
      //新增按钮点击事件
      openAdd(){
        this.visible = true;
      },
      //编辑按钮点击事件
      onShow(id){
        this.visible = true;
      },
      //删除按钮点击事件
      onRemove(id){

      },
      //新增弹窗确定按钮事件
      addCustomer(){
        //this.$refs.addForm.validate

        this.$refs['addForm'].validate(valid => {
          if (valid) {//校验通过
            postAction(this.url.add,this.customer).then((res) => {
              console.log(res);
              if (res.success){
                alert("新增成功")
              };
            })

          } else {//校验失败
            return false;
          }
        });
      },
      validateT(){
        console.log("单个标签触发事件校验");
        console.log(this.testForm);

      },
      //弹窗取消按钮事件
      cancel(){},

      //官方自带事件的处理方法需要参考文档定义
      getPage(page, pageSize){

      },
    },
    created() {
      this.getCustomerList(1,this.pageSize)
    }

  }
</script>

<style scoped>

</style>